<template>
<div>
  <table class="graphList-table">
    <tbody>
      <tr>
        <td class="graphList-td">
          <div class="graphList">
            <div class="main-div"   v-for="(item,index) in childrenList"  :class="{'main-div-selected':index==0}" @click="showGraph($event,item.id,item.name,item.value_type,item.units)">
              <div class="child-div"> <span class="icon-page-itemgreen item-span"></span></div>
              <div class="child-div">{{item.name}}</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="graph-td">
          <div class="graph-div">
            <graphComp :keyMap="keyMap" :parentDesignerData='desigerData' :inputParams='params'></graphComp>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</template>
<script>
import graphComp from 'views/graph/designer.vue'
import api from 'api/device.js'
import {
  RES_ITEM_FLOAT,
  RES_ITEM_STR,
  RES_ITEM_LOG,
  RES_ITEM_UINT,
  RES_ITEM_TEXT
} from 'common/resTypeEnum'
export default {
  props: {
    childrenList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      activeName: 'first',
      keyMap: {
        editable: 'false'
      },
      desigerData: {},
      params: {}
    };
  },
  methods: {
    showGraph(ev,id,name,valueType,units) {
      this.doShow($(ev.target),id,name,valueType,units);
    },
    doShow(ele,id,name,valueType,units) {
      let $el = ele
      this.thisTitle = name;
      $(".main-div").removeClass("main-div-selected");
      if($el.hasClass("child-div")){
        $el.parent().addClass("main-div-selected");
      }else{
        $el.addClass("main-div-selected");
      }
      if(valueType){//直接是监控项
        this.params = {
          itemid:id,
          itemname:name,
          units:units,
          valueType:valueType
        };
        let grsNo = 'item'
        if(!(RES_ITEM_FLOAT == this.params.valueType || RES_ITEM_UINT == this.params.valueType) ){
          grsNo = 'item-table'
          this.params['graphType'] = 'item-table'
        }
        this.desigerData = {
          grsNo: grsNo
        };
      }else{//是图形
          api.queryItemByGraphid(id).then((response) => {
            var iteminfo = response.data;
            this.desigerData = {
              "grsNo": 'item-line'
            };
            var idArray = [];
            var nameArray = [];
            var unitsArray = [];
            for (var i = 0; i < iteminfo.length; i++) {
              idArray.push(iteminfo[i].itemid);
              nameArray.push(iteminfo[i].name);
              unitsArray.push(iteminfo[i].units);
            }
            this.params = {
              itemid: idArray,
              itemname: nameArray,
              unit:unitsArray
            };
          }).catch((err) =>{
              console.error(err);
          });
      }
    }
  },
  components: {
    graphComp
  },
  mounted(){
    var self = this;
    setTimeout(function(){
      var firstChild = self.childrenList[0];
      self.doShow($(".main-div :first"),firstChild.id,firstChild.name,firstChild.value_type,firstChild.units);
    },1000);
  }

};
</script>
<style>
.graphList{
  height: 100px;
  overflow:auto;
}
.graphList-table {
  border: 0px;
  padding: 5px;
  width: 100%;
}

.graphList-td {
  vertical-align: top;
  font-size: 15px;
  background-color: #f9f9f9;
  height: 20%;
}

.graph-td {
}

.graph-div {
  height: auto;
  overflow-y: auto;
}

.main-div {
  float: left;
  margin: 8px;
  min-width: 300px;
  cursor: pointer;
}

.main-div :hover {
  text-decoration: underline;
}
.child-div :hover {
  color: #79f9f9;
  text-decoration: underline;
}
.main-div-selected {
  background-color: #20a0ff;
  color: #fff;
}

.child-div {
  float: left;
}

.item-span {
  margin: 0px;
  display: block;
}
</style>
